.loader_overlay {
  background: #021f3c;
  position: fixed;
  z-index: 25;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.loader_overlay_prompt {
  position: fixed;
  z-index: 25;
  color: white;
  text-shadow: 1px 1px 1px black;
  font-size: x-large;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader_circle {
  position: absolute;
  border-radius: 50%;
  background: #1d9e4f;
  animation: loader_ripple 15s infinite;
  box-shadow: 0px 0px 1px 0px #508fb9;
}

.loader_small {
  width: 200px;
  height: 200px;
  left: calc(50% - 100px);
  bottom: -100px;
}

.loader_medium {
  width: 400px;
  height: 400px;
  left: calc(50% - 200px);
  bottom: -200px;
}

.loader_large {
  width: 600px;
  height: 600px;
  left: calc(50% - 300px);
  bottom: -300px;
}

.loader_xlarge {
  width: 800px;
  height: 800px;
  left: calc(50% - 400px);
  bottom: -400px;
}

.loader_xxlarge {
  width: 1000px;
  height: 1000px;
  left: calc(50% - 500px);
  bottom: -500px;
}

.loader_shade1 {
  opacity: 0.2;
}
.loader_shade2 {
  opacity: 0.5;
}

.loader_shade3 {
  opacity: 0.7;
}

.loader_shade4 {
  opacity: 0.8;
}

.loader_shade5 {
  opacity: 0.9;
}

@keyframes loader_ripple {
  0% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(0.8);
  }
}
